<template>
  <el-card style="max-width: 320px; max-height:750px">
    <template #header>
      <div style="height:20px;text-align: center;margin:15px;font-size:20px" class="Afont">{{ item.yard_name }}</div>
    </template>
    <div>
      <el-image
        :src="`http://localhost:8000${item.yard_image}`"
        style="width: 100%; height: 200px; object-fit: cover"
      ></el-image>
    </div>
    <template #footer>
      <div >
        <pre class="Afont" style="margin:-8px">
<div style="font-size:14px"> 地址：{{ item.campusname }}</div>
<div style="font-size:14px"> 时间：{{ item.availabletime }}</div>
<div style="font-size:14px"> 项目: {{ item.yard_type }}</div>
<div style="font-size:14px"> 状态: {{ item.yard_status }}</div>
<span class="money">租金: {{ item.hourrate }} 元/小时</span>
        </pre>
      </div>
      <el-button
        style="display: block; width: 100%; background-color: #e65c75;color: #fff; font-size:16px"
        @click="goToDetails"
        >详 情</el-button
      >
    </template>
  </el-card>
</template>

<script setup>
import { defineProps } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";

const props = defineProps({
  item: {
    type: Object,
    required: true,
  },
});

const router = useRouter();

const isLoggedIn = async () => {
  try {
    const response = await fetch("http://localhost:8000/Login/check", {
      credentials: "include",
    });
    const data = await response.json();
    console.log("Login check response:", data);
    return data.code === 0;
  } catch (error) {
    console.error("Error checking login status:", error);
    return false;
  }
};

const goToDetails = async () => {
  if (await isLoggedIn()) {
    console.log("User is logged in, navigating to details page");
    router.push({
      name: "YardDetails",
      query: {
        yard_id: props.item.yard_id,
        yard_name: props.item.yard_name,
        campusname: props.item.campusname,
        yard_type: props.item.yard_type,
        availabletime: props.item.availabletime,
        yard_text: props.item.yard_text,
        yard_status: props.item.yard_status,
        hourrate: props.item.hourrate,
        yard_image: `http://localhost:8000${props.item.yard_image}`,
      },
    });
  } else {
    console.log("User is not logged in, redirecting to login page");
    ElMessage({
      message: "请先登录",
      type: "warning",
      duration: 2000,
      onClose: () => {
        router.push({ name: "Login" });
      },
    });
  }
};
</script>

<style scoped>
:deep(.el-card__header) {
  padding-top: 0;
  padding-bottom: 0;
}

.money {
  color: #e65c75;
  font-size: 20px;
  font-weight: bold;
  text-align: right;
}
.Afont {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  font-weight: 550;
}
</style>
